<template>
  <div>
        <h1 style="text-align:center;">用户列表</h1>
        <!-- 点击跳转到用户新增页面 -->
          <el-button type="primary" @click="$router.push('/user/add')">新增用户</el-button>
        <!-- 发请求获取用户列表数据 到 request中 -->
            <el-table
                  :data="userList"
                  style="width: 100%">
              <el-table-column
                  prop="username"
                  label="用户名"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="email"
                  label="邮箱"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="tel"
                  label="手机号">
              </el-table-column>
              <el-table-column
                  label="账号状态">
                <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.enable"
                      @change="change(scope
                      .row._id)"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
               <el-table-column
                  label="注册时间"
                  width="180">
                  <!-- 时间用过滤器 -->
                  <template slot-scope="scope">
                    <span>{{scope.row.createdAt | time}}</span>
                  </template>
              </el-table-column>
               <el-table-column
                  label="最后修改时间"
                  width="180">
                  <!-- 时间用过滤器 -->
                  <template slot-scope="scope">
                    <span>{{scope.row.updatedAt | time}}</span>
                  </template>
              </el-table-column>
              <!-- 角色显示需要做个判断 用自定义布局 -->
               <el-table-column
                  label="角色">
                  <!-- 三元运算做判断 存在就显示name 不存在就显示“前台用户” -->
                  <template slot-scope="scope">
                    <span>{{scope.row.role ? scope.row.role.name : '前台用户'}}</span>
                  </template>
              </el-table-column>
               <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                    <!-- 按钮权限  自定义指令验证权限v-permission  很多页面都要使用 不定义在这个页面 封装出去  然后导入 --放在局部使用-->
                      <el-button
                          v-permission="{path: '/user/edit', name: '用户修改'}"
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">编辑
                      </el-button>

                      <!-- 权限删除 需要添加点击事件  发送请求  弹框做 -->
                      <el-button
                         v-permission="{path: '/user/del', name: '用户删除'}"
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">删除
                      </el-button>
                  </template>
              </el-table-column>
          </el-table>

          <!-- 用户删除 对话框做 -->
          <el-dialog
              title="提示"
              :visible.sync="dialogVisible1"
              width="30%"
          >
            <span>真的要残忍的将我删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="quxiao">取 消</el-button>
                <!-- 点击确定发送请求删除数据   数据库数据也删除  发请求 -->
                <el-button type="primary" @click="del">确 定</el-button>
            </span>
          </el-dialog>

          <!-- 用户编辑  对话框做  -->
          <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>         
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                        v-model="form.enable"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <!-- 发请求获取所有角色 -->
                <el-form-item label="角色">
                    <el-select v-model="form.role" placeholder="请选择角色">
                        <!--遍历请求回来的数据 （角色） label显示出来的汉字  -->
                    <el-option v-for="role in roleList" :key="role._id" :label="role.name" :value="role._id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <!-- 点击创建获取数据 发请求 添加数据 在request -->
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
//导入发请求获取用户列表数据  角色列表数据  用户编辑 用户删除  用户启用状态修改
import {UserList,RoleList,UserEdit,UserDel, UserStatus} from '@/request'
//导入处理时间的 moment
import moment from 'moment'
//导入按钮自定义指令权限  函数
import permission from '@/utils/permission'

export default {
  //使用自定义指令 值是一个对象  键是自定义指令的名字
  directives: {
      //也应该是一个对象  当只有bind和updated 可以简写 第一次绑定和修改时会使用的数据  经常情况下这两个函数是一样的可以简写成一个函数
      //需要有参数  el binding  键和值相等可以简写
      permission
      
  },
  data () {
    return {
          // 定义数据
          userList:[],
          // 编辑显示状态  默认情况下隐藏
          dialogVisible: false,
          // 删除对话框  默认情况下隐藏
          dialogVisible1: false,
          form: {
            username: '',
            password: '',
            email: '',
            tel: '',
            enable: false,
            role: ''
          },
          //请求回来的数据定义给一个数组  角色列表
          roleList:[]
      }
    },
  methods: {
    // 用户启用状态修改
    async change(id){
            // console.log(id);
            let data =  await UserStatus(id)
            // console.log(data);
            let { error_code,msg } = data
            if(error_code === 200){
                this.$message({
                    message: msg,
                    type: 'success',              
                });
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                });
            }
        },
    // 删除点击取消 对话框隐藏
    quxiao(){
         this.dialogVisible1 = false
    },
    // 
    async del () {
      //点击删除发送请求  把this.form 当做数据传递
      let data = await UserDel(this.form)
       console.log(data);
      //删除成功给用户提示  
            let {error_code,msg} = data 
           if(error_code === 200){
              this.$message({
                type: 'success',
                duration: 1500,
                message: msg,
                // 提示关闭之后不用  跳转  显示变隐藏
                onClose:()=>{
                    this.dialogVisible1 = false;
                    // 跳当前地址会报错 两行代码解决
                    // this.$router.push('/user/list')
                    //删除成功页面没有及时显示需要刷新 解决办法  把获取所有用户列表的函数再调用 -- 重新渲染列表
                    this.getUserList()
                }
              })
              //失败提示
           }else{
             this.$message({
                type: 'error',
                duration: 1500,
                message: msg,
              })
           }
    },
     async onSubmit (){
        console.log(this.form);
        //点击创建发请求  把this.form 当做数据传递
       let data =  await UserEdit(this.form)
      //  console.log(data);
      //用户编辑成功给用户提示  
           let {error_code,msg} = data 
           if(error_code === 200){
              this.$message({
                type: 'success',
                duration: 1500,
                message: msg,
                // 提示关闭之后不用  跳转  显示变隐藏
                onClose:()=>{
                    this.dialogVisible = false;
                    // 跳当前地址会报错 两行代码解决
                    // this.$router.push('/user/list')
                    //还需要把form清空
                    this.form = {
                      form: {
                          username: '',
                          password: '',
                          email: '',
                          tel: '',
                          enable: false,
                          role: ''
                        },
                    }
                    //修改成功页面没有及时显示需要刷新 解决办法  把获取所有用户列表的函数再调用 -- 重新渲染列表
                    this.getUserList()
                }
              })
              //失败提示
           }else{
             this.$message({
                type: 'error',
                duration: 1500,
                message: msg,
              })
           }
      },
    // 权限编辑  用对话框做 不做单独页面
      handleEdit(index, row) {
        // console.log(index, row);
           // 点编辑 变为 true
      this.dialogVisible = true;
       //默认情况下点开显示数据  row已经传过来当前的数据了  把数据给form
       console.log(row);
       
      this.form = row;
      //由于对话框中的角色一直不改变 需要重新赋值
      this.form.role = row.role._id
      },

      // 删除数据
      handleDelete(index, row) {
        // console.log(index, row);
        //点击删除显示
       this.dialogVisible1 = true;
         this.form = row;
      //由于对话框中的角色一直不改变 需要重新赋值
      this.form.role = row.role._id
      },

      async  getUserList(){
          let data= await UserList()
          console.log(data);
          let {error_code,msg} = data
          //判断有没有请求成功
          if(error_code === 200){
              this.userList = data.data
          }
       },
        //得到请求回来的数据
        async getRoleList(){
          let data = await RoleList()
          console.log(data);
          //请求回来的数据 赋值给this.rolelist
          this.roleList = data.data.rolelist
        }
    },
    //在这里调用
    created(){
         this.getUserList()
        this.getRoleList()

    },
    //定义过滤器
    filters:{
      //过滤器名称 -第一个参数是我们要处理的值
      time(value) {
        //自己处理很麻烦  -  用插件 moment (先下载 npm install moment )
         return moment(value).format('YYYY-MM-DD HH:mm:ss')
      }
    }
}
</script>

<style>
    
</style>
